<template>
	<t-modal
		title="新增"
		:width="640"
		:visible="visible"
		:confirmLoading="loading"
        destroyOnClose
		@ok="
			() => {
				$emit('ok');
			}
		"
		@cancel="
			() => {
                advancedMatch = '';
				$emit('cancel');
			}
		"
	>
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-form-item class="hiddenItem">
					<a-input v-decorator="['uuid']" disabled type="hidden" />
				</a-form-item>
                <a-form-item label="并且/或者" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select
                        placeholder="并且/或者"
                        v-decorator="['subTableRule', { initialValue: 'or', rules: [{ required: true, message: '请选择此项！' }] }]"
                        default-value="or"
                    >
                        <a-select-option value="or">
                            or
                        </a-select-option>
                        <a-select-option value="and">
                            and
                        </a-select-option>
                    </a-select>
				</a-form-item>
                <a-form-item label="方案名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="方案名称" v-decorator="['fieldName', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
                <a-form-item label="所属字段" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="所属字段" v-decorator="['fieldEncoding', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
                <a-form-item label="唯一标识" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="唯一标识" v-decorator="['permissionIdentifying', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
                <a-form-item label="字段类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select
                        placeholder="字段类型"
                        default-value="string"
                        v-decorator="['conditionalSymbol', { initialValue: 'string', rules: [{ required: true, message: '请选择此项！' }] }]"
                    >
                        <a-select-option value="string">
                            string
                        </a-select-option>
                        <a-select-option value="int">
                            int
                        </a-select-option>
                        <a-select-option value="datetime">
                            datetime
                        </a-select-option>
                    </a-select>
				</a-form-item>
                <a-form-item label="条件符号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select
                        placeholder="条件符号"
                        v-decorator="['advancedMatch', { rules: [{ required: true, message: '请选择此项！' }] }]"
                        @change="advancedMatchChange"
                    >
                        <a-select-option value="eq">等于</a-select-option>
                        <a-select-option value="ne">不等于</a-select-option>
                        <a-select-option value="gt">大于</a-select-option>
                        <a-select-option value="ge">大于等于</a-select-option>
                        <a-select-option value="lt">小于</a-select-option>
                        <a-select-option value="le">小于等于</a-select-option>
                        <a-select-option value="isNull">是null</a-select-option>
                        <a-select-option value="isNotNull">不是null</a-select-option>
                        <!-- <a-select-option value="sql">自定义SQL</a-select-option> -->
                    </a-select>
				</a-form-item>
                <a-form-item label="条件内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select
                        v-if="advancedMatch != 'sql'"
                        placeholder="条件内容"
                        v-decorator="['conditionalContent', { rules: [{ required: true, message: '请选择此项！' }] }]"
                    >
                        <a-select-option value="@CurrentUserNameId">当前登录用户账号</a-select-option>
                        <a-select-option value="@CurrentUserName">当前登录用户姓名</a-select-option>
                        <a-select-option value="@CurrentOrgId">当前登录用户组织机构</a-select-option>
                        <a-select-option value="@CurrentRoleId">当前登录用户角色</a-select-option>
                        <a-select-option value="@CurrentSysDate">当前系统日期</a-select-option>
                        <a-select-option value="@CurrentSysTime">当前登录时间</a-select-option>
                    </a-select>
                    <!-- <a-textarea
                        v-else
                        v-decorator="['conditionalContent', { rules: [{ required: true, message: '请输入此项！' }] }]"
                    ></a-textarea> -->
				</a-form-item>
                <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select
                        placeholder="状态"
                        v-decorator="['permissionStatus', { initialValue: '1', rules: [{ required: true, message: '请选择此项！' }] }]"
                    >
                        <a-select-option value="1">启用</a-select-option>
                        <a-select-option value="0">禁用</a-select-option>
                    </a-select>
				</a-form-item>
                <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input-number placeholder="排序" :min="1" :max="9999" v-decorator="['permissionSort', { rules: [{ required: true, message: '请输入此项！' }] }]" />
				</a-form-item>
			</a-form>
		</a-spin>
	</t-modal>
</template>

<script>
import pick from 'lodash.pick';

const fields = ['uuid', 'subTableRule', 'fieldName', 'fieldEncoding', 'permissionIdentifying','conditionalSymbol', 'advancedMatch', 'conditionalContent', 'permissionStatus', 'permissionSort'];

export default {
	props: {
		visible: {
			type: Boolean,
			required: true,
		},
		loading: {
			type: Boolean,
			default: () => false,
		},
		model: {
			type: Object,
			default: () => null,
		}
	},
	data() {
		return {
			labelCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 7,
				},
			},
			wrapperCol: {
				xs: {
					span: 24,
				},
				sm: {
					span: 13,
				},
			},
			form: this.$form.createForm(this),
            advancedMatch: ""
		};
	},
    created() {
		// 防止表单未注册
		fields.forEach((v) => this.form.getFieldDecorator(v));
		// 当 model 发生改变时，为表单设置值
		this.$watch('model', () => {
            this.advancedMatch = this.model.advancedMatch;
			this.model.permissionStatus = this.model.permissionStatus.toString();
			this.model && this.form.setFieldsValue(pick(this.model, fields));
		});
	},
	methods: {
		advancedMatchChange(e){
            this.advancedMatch = e
        }
	}
};
</script>
